<template>
  <div class="scroll-loading">
    <img width="24" height="24" src="./loading.gif">
    <p v-show="showTitle">{{title}}</p>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'scroll-loading',
  props: {
    title: {
      type: String,
      default: '正在载入...'
    },
    showTitle: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"

.scroll-loading
  width: 100%
  text-align: center
  img
    display: block
    width: 24px
    height: 24px
    margin: 10px auto
  .desc
    line-height: 20px
    font-size: $font-size-small
    color: $color-text-l
 /*.loading-enter-active, .loading-leave-active*/
  /*transition: height .5s*/
  /*.loading-enter, .loading-leave-to*/
   /*height: 0*/
</style>
